layui.use(['element'], function () {
    var element = layui.element
        , $ = layui.$;

    let activeAside;

    element.on('nav(menu)', elem => {
        const clickId = $(elem).data('id');
        if (clickId === 'index') {
            $('.layui-fluid').show();
            $('.layui-side, .layui-body').hide();
        } else {
            $('.layui-fluid').hide();
            $('.layui-side, .layui-body').show();
            activeAside = $('#' + clickId);
            activeAside.show();
            activeAside.siblings().hide();
        }
    });

    element.on('nav(left)', function (elem) {
        const id = $(elem).data('id')
        if (id) {
            let findId = false
            $('.layui-tab-title li').each((i, v) => {
                if ($(v).attr('lay-id') === id) {
                    element.tabChange('tab', id);
                    findId = true;
                    return false;
                }
            })
            if (!findId) {
                element.tabAdd('tab', {
                    title: $(elem).text()
                    , content: '<iframe width="100%" height="100%" src="' + id + '" frameborder="0" scrolling="auto"></iframe>'
                    , id: id
                });
                element.tabChange('tab', id);
            }
        }
    });

    $('.hide-aside').click(function () {
        $('.layui-side').toggle();
        activeAside.toggle();
        const layuiBody = $('.layui-body');
        const icon = $('.hide-aside i');
        if (layuiBody.css('left') === '200px') {
            layuiBody.css('left', '0px');
            icon.removeClass('layui-icon-shrink-right').addClass('layui-icon-spread-left')
        } else {
            layuiBody.css('left', '200px')
            icon.removeClass('layui-icon-spread-left').addClass('layui-icon-shrink-right')
        }
    })

    //移除鼠标指向菜单时，菜单下面出现的彩色方块，不移除, 后添加的菜单没有指示方块
    $("#menu").find('span.layui-nav-bar').remove();

    //以下为增加菜单的的过程，可以使用ajax动态生成
    //主菜单增加菜单项目
    $('#menu').append('<li class="layui-nav-item"><a href="javascript:;" data-id="5">nav 5</a></li>')
    //侧边菜单增加内容
    $('.layui-side-scroll').append('\
        <ul class="layui-nav layui-nav-tree" lay-filter="left" id="5" >\
            <li class="layui-nav-item layui-nav-itemed">\
                <a class="" href="javascript:;">menu group 5</a>\
                <dl class="layui-nav-child">\
                    <dd><a href="javascript:;" data-id="long.html">超长测试页</a></dd>\
                    <dd><a href="javascript:;" data-id="test.html">正常的页面</a></dd>\
                    <dd><a href="javascript:;">menu 3</a></dd>\
                    <dd><a href="">the links</a></dd>\
                </dl>\
            </li>\
            <li class="layui-nav-item">\
                <a href="javascript:;">menu group 2</a>\
                <dl class="layui-nav-child">\
                    <dd><a href="javascript:;">list 1</a></dd>\
                    <dd><a href="javascript:;">list 2</a></dd>\
                    <dd><a href="">超链接</a></dd>\
                </dl>\
            </li>\
            <li class="layui-nav-item"><a href="javascript:;" data-id="test2.html">不用折叠菜单也可以</a></li>\
            <li class="layui-nav-item"><a href="">the links</a></li>\
        </ul>\
        ')
    //重新渲染所有菜单项目
    element.render('nav');
});

